<template>
  <div class="page-container container">
    <div class="in-container search-box">
      <sumSearchForm @search="search($event)" @reset="reset($event)" />
    </div>
    <div class="in-container table-box">
      <AppPageTable
        class="table"
        stripe
        :data="tableData.data"
        :autostyle="'height: calc(100% - 1px) ;'"
        :option="tableData.option"
        :showSummary="true"
        :sumText="'合计'"
        @change="getTableData()"
      >
        <el-table-column label="单位编号" prop="entCode" align="center">
        </el-table-column>
        <el-table-column label="单位名称" prop="entFullname" align="center">
        </el-table-column>
        <el-table-column align="center" label="人民币">
          <el-table-column
            width="100px"
            show-overflow-tooltip
            align="center"
            label="应收"
            prop="ys1"
          />
          <el-table-column
            width="100px"
            show-overflow-tooltip
            align="center"
            label="已收"
            prop="has1"
          />
          <el-table-column
            width="100px"
            show-overflow-tooltip
            align="center"
            label="未收"
            prop="ws1"
          />
        </el-table-column>
        <el-table-column align="center" label="港币">
          <el-table-column
            width="100px"
            show-overflow-tooltip
            align="center"
            label="应收"
            prop="ys2"
          />
          <el-table-column
            width="100px"
            show-overflow-tooltip
            align="center"
            label="已收"
            prop="has2"
          />
          <el-table-column
            width="100px"
            show-overflow-tooltip
            align="center"
            label="未收"
            prop="ws2"
          />
        </el-table-column>
        <el-table-column align="center" label="美元">
          <el-table-column
            width="100px"
            show-overflow-tooltip
            align="center"
            label="应收"
            prop="ys3"
          />
          <el-table-column
            width="100px"
            show-overflow-tooltip
            align="center"
            label="已收"
            prop="has3"
          />
          <el-table-column
            width="100px"
            show-overflow-tooltip
            align="center"
            label="未收"
            prop="ws3"
          />
        </el-table-column>
        <el-table-column align="center" label="欧元">
          <el-table-column
            width="100px"
            show-overflow-tooltip
            align="center"
            label="应收"
            prop="ys4"
          />
          <el-table-column
            width="100px"
            show-overflow-tooltip
            align="center"
            label="已收"
            prop="has4"
          />
          <el-table-column
            width="100px"
            show-overflow-tooltip
            align="center"
            label="未收"
            prop="ws4"
          />
        </el-table-column>
      </AppPageTable>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import sumSearchForm from "./components/sumSearchForm.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
export default defineComponent({
  components: {
    sumSearchForm,
    AppPageTable,
  },
  data() {
    return {
      query: {},
      tableData: {
        data: [],
        option: useTableOption(),
      },
    };
  },
  methods: {
    search(queryData) {
      this.query = queryData;
      this.tableData.option.page = 1;
      this.getTableData();
    },
    reset(queryData) {
      this.query = queryData;
      this.tableData.option.page = 1;
      this.getTableData();
    },
    getTableData() {},
  },
  mounted() {},
});
</script>

<style lang="scss" scoped>
.container{
  display: flex;
  flex-direction: column;
  .search-box{
    height: auto;
    margin-bottom: 8px;
  }
  .table-box{
    flex:1;
  }
}
</style>
